<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      display: flex;
      border: 1px solid #000;
      width: 600px;
      margin: 0 auto;
      height: 150px;
      align-items: center;
      justify-content: center;
    }

    .wrap div {
      display: flex;
      height: 70%;
      width: 44%;
      margin: 0 3%;
      border: 1px solid #000;
      justify-content: center;
      align-items: center;
      background: #fff;
    }

    .btn-wrap {
      text-align: center;
      padding-top: 20px;
    }

    .btn-wrap button {
      display: inline-block;
      padding: 4px 10px;
    }

  </style>
</head>
<body>
<div class="wrap">
  <div>
    <div>
      <div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div>
      <div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
    <div>
      <div>
        <div></div>
        <div></div>
      </div>
      <div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>
<div class="btn-wrap">
  <button>前序</button>
  <button>中序</button>
  <button>后序</button>
</div>
<script>
  let wrap = document.querySelector(".wrap");
  let btn_wrap = document.querySelector(".btn-wrap");
  let btn1 = btn_wrap.querySelectorAll("button")[0];
  let btn2 = btn_wrap.querySelectorAll("button")[1];
  let btn3 = btn_wrap.querySelectorAll("button")[2];
  let arr = [];
  let last;
  let toggle = false;
  //给按钮绑定事件
  btn1.onclick = function () {
    if (!toggle) {
      toggle = true;
      reset();
      preOrder(wrap);
      showWay();
    }
  };
  btn2.onclick = function () {
    if (!toggle) {
      toggle = true;
      reset();
      inOrder(wrap);
      showWay();
    }
  };
  btn3.onclick = function () {
    if (!toggle) {
      toggle = true;
      reset();
      postOrder(wrap);
      showWay();
    }
  };
  //二叉树的遍历的三种方式
  //(1)前序遍历（DLR)
  function preOrder(node) {
    if (node) {
      arr.push(node);
      preOrder(node.firstElementChild);
      preOrder(node.lastElementChild);
    }
  }

  //(2)中序遍历（LDR）
  function inOrder(node) {
    if (node) {
      inOrder(node.firstElementChild);
      arr.push(node);
      inOrder(node.lastElementChild);
    }
  }

  //(3)后序遍历（LRD）
  function postOrder(node) {
    if (node) {
      postOrder(node.firstElementChild);
      postOrder(node.lastElementChild);
      arr.push(node);
    }
  }

  //显示遍历的过程
  function showWay() {
    for (let i = 0; i < arr.length; i++) {
      setTimeout(function (i) {
        return function () {
          if (i === arr.length - 1) {
            toggle = false;
          }
          if (last) {
            last.style.background = "white";
          }
          arr[i].style.background = "red";
          last = arr[i];
        }
      }(i), i * 1000)
    }
  }

  //初始化
  function reset() {
    arr = [];
    if (last) {
      last.style.background = "white";
    }
  }
</script>
</body>
</html>
